import React, { useRef, useState, useEffect } from "react";
import { BrowserRouter, Navigate, Route, Routes, useLocation } from "react-router-dom";
import "./App.less";
import Home from "./views/home";
import BlockList from "./views/block/list";
import BlockDetail from "./views/block/detail";
import TransferList from "./views/transfer/list";
import ExtrinsicList from "./views/extrinsic/list";
import ExtrinsicDetail from "./views/extrinsic/detail";
import EventList from "./views/event/list";
import MinerList from "./views/miner/list";
import AccountList from "./views/account/list";
import AccountDetail from "./views/account/detail";
import StorageAccountDetail from "./views/account/storage-user-detail";
import SignatureAccounts from "./views/account/signaturer";
import NominatorAccounts from "./views/account/nominator";
import RPCList from "./views/rpc-node/list";
import NavBar from "./components/NavBar";
import FileDetail from "./views/file/detail";
import Storage from "./views/storage/list";
import StorageGateway from "./views/storage/gateway";
import StoragePrice from "./views/storage/price";
let timeout = null;

function App() {
	const handleEvent = () => {
		console.log('user goback');
		window.cache.isBack = true;
		clearTimeout(timeout);
		timeout = setTimeout(function () {
			window.cache.isBack = false;
		}, 1000);
	};

	useEffect(() => {
		if (!window.cache) {
			window.cache = {};
		}
		window.addEventListener("popstate", handleEvent);
		return () => window.removeEventListener("popstate", handleEvent);
	}, []);
	return (
		<div className="App">
			<BrowserRouter>
				<NavBar className="page-header" />
				<div className="containner">
					<Routes>
						<Route path="/" element={<Home />} />
						<Route path="/block" element={<BlockList />} />
						<Route path="/block/:q" element={<BlockDetail />} />
						<Route path="/transfer" element={<TransferList />} />
						{/* <Route path="/transfer/:q" element={<TransferDetail />} /> */}
						<Route path="/extrinsic" element={<ExtrinsicList />} />
						<Route path="/extrinsic/:q" element={<ExtrinsicDetail />} />
						<Route path="/event" element={<EventList />} />
						<Route path="/miner/:q" element={<MinerList />} />
						<Route path="/account/" element={<AccountList />} />
						<Route path="/account/:q" element={<AccountDetail />} />
						<Route path="/account/storage/:q" element={<StorageAccountDetail />} />
						<Route path="/account/signaturer/:q" element={<SignatureAccounts />} />
						<Route path="/account/nominator/:q" element={<NominatorAccounts />} />
						<Route path="/rpc" element={<RPCList />} />
						<Route path="/file/:q" element={<FileDetail />} />
						<Route path="/storage" element={<Storage />} />
						<Route path="/storage/gateway" element={<StorageGateway />} />
						<Route path="/storage/price" element={<StoragePrice />} />
					</Routes>
				</div>
			</BrowserRouter>
		</div>
	);
}

export default App;

